// Custom styles for qunitjs.com


.site-logo img {
  height: 2.369rem;
}

h3 a {
    // Improve balance of layout color contrast on "Plugins" and "Projects" pages
    // (not everything the same color)
    color: inherit;
}

.table-style-api th:first-child {
  min-width: 20em;
}

@media (max-width: 768px) {
  .table-style-api tr,
  .table-style-api th,
  .table-style-api td {
    display: block;
  }
  .table-style-api tr {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid $color-off-white;
  }
  .table-style-api th:first-child,
  .table-style-api td:first-child {
    order: 1;
    flex-grow: 1;
  }
  .table-style-api th,
  .table-style-api td {
    border: 0;
  }
}

.main img {
  // Use max-width to scale down images from the declared <img width> on
  // narrow viewports to avoid overflow.
  max-width: 100%;
  // Use max-height to scale down tall images to fit within the viewport.
  max-height: 100vh;
  // Free up the declared <img height> so that scaling down maintains aspect ratio.
  // We must not set `width: auto` as otherwise images may also get scaled up
  // instead of only scaled down. This way, the declared <img> width/height remain
  // effective as the true maximum, especially for 2dppx images or other images
  // where content author has declared preferred dimensions.
  height: auto;
}

.content figure {
  margin: $size-spacing 0;
  text-align: center;
  font-size: $size-sm;
}
.content figcaption {
  padding: 0.1em 0.4em 0.3em  0.3em;
}

.content figure:has(figcaption:first-child) {
  border: 1px solid $color-off-white;
}
.content figure figcaption:first-child {
  padding: 0.3em 0.4em;
  border-bottom: 1px solid $color-off-white;
  background: $color-light;
}

.content figure img {
  // Avoid gap at the bottom due to line-height
  vertical-align: middle;
}

@media (max-width: 768px) {
  // The negative margins are "pop out"
  // and must match the padding on `.main-columns`
  .content figure,
  .content pre.highlight {
    margin-left: (-$size-spacing);
    margin-right: (-$size-spacing);
  }
}

// Prefer these figures in a row if they fit,
// collapse as-needed on narow viewports.
@media (min-width: 768px) {
  .figure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: $box-spacing;
    // "pop out"
    margin: $size-spacing (-$size-spacing);
  }
  .figure-row:has(figcaption:first-child) {
    align-items: stretch;
    gap: $box-spacing 1px;
  }
  .figure-row figure {
    flex-grow: 1;
    margin: 0;
    width: calc(50% - ($box-spacing/2) - 1px);
  }
}

.content li {
  margin: 0.5em 0;
}

.content a.footnote {
  text-decoration: none;
}

/* Home */

.example-result iframe {
    width: 100%;
    border-radius: 3px;
}

.example-result iframe,
.example-result pre {
    height: 360px;
}

/* Browser */

// Discourage selecting to copy/paste because this demonstrates
// HTML that QUnit generates at runtime.
// Not HTML to place in a test.html file.
.code-no-select {
  user-select: none;
}

/* Plugins */
#plugins {
    list-style: none;
    padding: 0;
}
.plugin {
    border-bottom: 1px solid $color-off-white;
}

/* Brand */
.q-color-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    border-radius: 1em;
}
.q-color-block {
    display: block;
    padding: 1em;
}
